﻿<div class="ui-widget-content">
	<h3>Efeitos Animados - Transições de Cores</h3>
	<p>Estende a função Animate do jQuery. Tornando-a capaz de fazer animações utilizando as cores de fundo e das bordas dos elementos.</p>
  <div style="float: left;">

        <div>
            <a id="botao_sintaxe_animate" href="#">Sintaxe</a>
            <div id="dialog_sintaxe_animate" title="Opções do ANIMATE" style="display: none;"  class="dialog_apresentacao">
                <p>Sintaxe:</p>
    <pre>$( seletor ).animate( 
  [opcoes], 
  [velocidade], 
  [callback]
);</pre>
                <br/><br/>
                <p>Exemplo utilizado no slide:</p>
    <pre>$( "#caixa_animada_color" ).animate(
{
  backgroundColor: "yellow",
  color: "#000",
  width: 400,
  height: 300
}
, 1000 );</pre>

            </div>
        </div>

        <div>
            <a id="botao_animate_opcoes" href="#">Propriedades para animar</a>
            <div id="dialog_animate_opcoes" title="Opções do ANIMATE" style="display: none;"  class="dialog_apresentacao">
                <p>Para as cores, as seguintes propriedades podem ser especificadas:</p>
                <ul>
                	<li>backgroundColor</li>
                  <li>borderBottomColor</li>
                  <li>borderLeftColor</li>
                  <li>borderRightColor</li>
                  <li>borderTopColor</li>
                  <li>color</li>
                  <li>outlineColor</li>
                </ul>
                <br/><br/>
                <p>As cores podem ser especificadas usando:</p>
                <ul>
                  <li>hex: #FF0000</li>
                  <li>rgb(255,255,255)</li>
                  <li>nomes: "black", "red"</li>
                </ul>
            </div>
        </div>

  </div>

  <div style="float: left; margin-left: 80px; height: 150px;">
    <div id="caixa_animada_color" class="draggable_azul">
    	<div style="margin: 50px; text-align: center; border-width: 10px;"><p>Eu sou uma caixa animada!</p></div>
    </div>
  </div>

  <div style="clear: both;" />
  <p>
    <div>
        <br/><br/><br/><br/><br/><br/><br/><br/>
        <a id="botao_cores_animar" href="#">Animar</a>
    </div>
  </p>


  <style type="text/css" rel="stylesheet">
		#caixa_animada_color { width: 400px; height: 200px; padding: 5px; margin: 5px auto; float: left; position: relative;  border:1px solid black; backgroundColor: "#aa0000", }
  </style>

  <script type="text/javascript">
      inicializador.efeitosTransicoesCores = function() {


//  		$( "#botoes_de_efeitos_color input" ).button().toggle(
  		$( "#botao_cores_animar" ).button().toggle(
  				function() {
  					$( "#caixa_animada_color" ).animate({
  						backgroundColor: "#aa0000",
  						color: "#FFF",
  						width: 100,
  						height: 170
  					}, 1000 );
  				},
  				function() {
  					$( "#caixa_animada_color" ).animate({
  						backgroundColor: "yellow",
  						color: "#000",
  						width: 400,
  						height: 300
  					}, 1000 );
  				}
  			);



        $("#botao_sintaxe_animate").button().click(function() {
            $("#dialog_sintaxe_animate").dialog({
                  width: 600, height: 750, modal: true , 
                  buttons: { "Fechar": function() { $(this).dialog("close"); } }
              });
        });

        $("#botao_animate_opcoes").button().click(function() {
            $("#dialog_animate_opcoes").dialog({
                  width: 600, height: 750, modal: true , 
                  buttons: { "Fechar": function() { $(this).dialog("close"); } }
              });
        });

      }
  </script>
</div>
